@charset "utf-8";

@import "common/reset/reset";

@import "common/fonts/roboto/roboto";

html, body{
    background-color: #282828;
}

h1, h2, h3, p{
    font-style: normal;
    margin: 0;
    padding: 0;
}

.page-view{
    width: 1190px;
    margin: 0 auto;
    font-family: 'Roboto';
}

.mod-bn{
    width: 100%;
    height: 696px;
    background-color: #01040a;
    position: relative;

    .bg-video{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .bn-msg{
        position: relative;
        z-index: 2;
        color: #fff;
        font-size: 72px;
        padding-top: 250px;
        text-align: center;
        font-weight: 700;
        line-height: 86px;
    }
}

.mod-voice{
    width: 100%;
    height: 698px;
    background-color: #367bbc;

    .voice-msg{
        height: 590px;
        line-height: 590px;
        text-align: center;
    }

    .v-txt{
        font-size: 150px;
        color: #fff;
        font-weight: 100;
    }

    .click-voice{
        margin: 0 20px;
    }

    .voice-ft{
        font-size: 21px;
        color: #fff;
        line-height: 40px;
        text-align: center;
    }
}

.mod-tips{
    width: 100%;
    height: 698px;
    background: url('/img/vision/tips-bg.jpg') no-repeat center center;
}

.mod-vison{
    width: 100%;
    height: 698px;
    background-color: #fff;

    .v-txt-1, .v-txt-2{
        color: #000;
        text-align: center
    }

    .v-txt-1{
        padding-top: 100px;
        margin-bottom: 40px;
        font-size: 72px;
        line-height: 80px;
        font-weight: 700;
    }

    .v-txt-2{
        font-size: 23px;
        line-height: 35px;
    }
}

.mod-history{
    background-color: #fff;
    padding: 0 65px;
    overflow: hidden;

    .hs-content{
        width: 1250px;
        .hs-item{
            width: 352px;
            height: 329px;
            float: left;
            position: relative;
            &:nth-child(2), &:nth-child(5){
                width: 361px;
            } 
            &:nth-child(3), &:nth-child(6){
                width: 356px;
            }

            .hs-mask{
                background-color: rgba(0,0,0,0.8);
                width: 290px;
                height: 240px;
                color: #fff;
                border-radius: 50%;
                position: absolute;
                top: 50%;
                left: 50%;
                margin: -145px 0 0 -145px;
                text-align: center;
                padding-top: 50px;

                .ms-title{
                    font-size: 26px;
                    color: #fff;
                    font-weight: 700;
                }

                .ms-msg{
                    font-size: 18px;
                    color: #fff;
                    margin: 5px 0 10px 0;
                }

                .ms-time{
                    font-size: 30px;
                    color: #fff;
                }
            }
        }
    }

    .hs-video{
        height: 620px;
    }
}

.mod-horizon{
    background-color: #fff;
    text-align: center;
    padding: 70px 0 90px 0;
    .h-txt-1{
        font-size: 72px;
        line-height: 70px;
        font-weight: 700;
        color: #000;
        margin-bottom: 30px;
    }

    .h-txt-2{
        font-size: 23px;
        line-height: 35px;
        color: #000;
    }
}

.mod-tick{
    text-align: center;
    background-color: #a3a0a0;
    padding: 100px 0 50px;

    .t-txt-1{
        font-size: 72px;
        line-height: 90px;
        font-weight: 700;
        color: #fff;
    }

    .t-txt-2{
        font-size: 23px;
        font-weight: 100;
        line-height: 40px;
        color: #fff;
        margin: 50px 0 85px;
    }

    .t-txt-3{
        font-size: 21px;
        font-weight: 700;
        color: #000;
    }
}

.mod-news{
    background-color: #fff;
    text-align: center;
    padding: 130px 140px 235px;

    .n-title{
        font-size: 72px;
        color: #000;
        font-weight: 700;
        margin-bottom: 140px;
    }

    .news-list{
        height: 800px;
        overflow: hidden;
    }

    .news-item{
        width: 440px;
        height: 180px;
        position: relative;
        margin-bottom: 110px;
        float: left;

        .news-img{
            width: 168px;
            height: 165px;
            position: absolute;
            top: 0;
            left: 0;
        }

        .news-box{
            width: 250px;
            margin-left: 188px;
            text-align: left;

            .news-title{
                font-size: 20px;
                font-weight: 700;
                color: #000;
                margin-bottom: 8px;
            }

            .news-desc{
                font-size: 20px;
                height: 100px;
                line-height: 30px;
                color: #000;
            }

            .news-more{
                font-size: 20px;
                color: #2c58c7;
                font-weight: 700;
                text-decoration: none;
            }
        }
    }
}

.mod-careers{
    background-color: #000;
    text-align: center;
    padding-top: 70px;

    .c-title{
        font-size: 72px;
        color: #fff;
        font-weight: 700;
        margin-bottom: 110px;
    }
}

.split{
    height: 95px;
    width: 1px;
    display: inline-block;
    background-color: #fff;
    margin: 0 0 5px 0;
}

